<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1_弹性布局入门</title>
    <style>
      .fu {
        /*width: 500px;*/
        height: 300px;
        background-color: pink;
        display: flex;/* 使用弹性布局，效果：父元素内所有的子元素横置，且父元素不会失高 */
        flex-wrap: wrap;/* 允许换行 */

        /* 设置子元素在主轴方向上的排布方式 */
        justify-content: flex-start;
        justify-content: flex-end;
        justify-content: center;
        justify-content: space-between;
        justify-content: space-around;
        justify-content: space-evenly;

        /* 设置子元素在交叉轴方向上的排布方式 */
        align-items: flex-start;
        align-items: center;
        align-items: flex-end;
      }
      .fu> div {
        width: 100px;
        height: 100px;
        border: 3px solid green;
        background-color: #00FF00;
      }
    </style>
</head>
<body>
  <div class="fu">
    <div class="z1">1</div>
    <div class="z2">2</div>
    <div class="z3">3</div>
    <div class="z4">4</div>
    <div class="z5">5</div>
    <div class="z6">6</div>
    <div class="z7">7</div>
  </div>
</body>
</html>